<template>
  <div class="content">
    <div class="conmment">
      <div class="header">
        <div>{{ headerInfo[TreeType + "_node_label_name"] }}</div>
        <div class="header_Input">
          <el-input
            v-model="searchName"
            placeholder="请输入筛选值"
            @input="inputValue"
            style="width: 50%"
            clearable
          ></el-input>
          <el-form
            ref="miniDragon"
            :rules="rules"
            class="demo-dynamic"
            style="width: 30%"
            :model="ruleForm"
          >
            <el-form-item prop="currentVal">
              <el-input v-model="ruleForm.currentVal" readonly></el-input>
            </el-form-item>
          </el-form>
        </div>
      </div>
      <div class="tree" @scroll="onscollend" v-loading="isLoadingTable">
        <el-table
          :data="tableData"
          :show-header="false"
          border
          style="width: 100%"
          :highlight-current-row="true"
          @current-change="handlecurrent"
        >
          <el-table-column prop="名称" label="名称"> </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    labels: {
      type: Array,
      default: () => [],
    },
    TreeType: {
      type: String,
      default: "",
    },
    headerInfo: {
      type: Object,
      default: () => {},
    },
    editFrom: {
      type: Object,
      default: () => {},
    },
    isPopup: {
      type: Boolean,
      default: false,
    },
    title: {
      type: String,
      default: "",
    },
  },
  watch: {
    isPopup(newV) {
      console.log(newV);
      if (newV) {
        this.initData();
      }
    },
    headerInfo(newV, oldV) {
      console.log(newV);
      this.pageNumone = 0;
      this.tableData = [];
      if (newV) {
        this.ruleForm.currentVal = "";
        this.initData();
      }
    },
  },
  data() {
    var validateName = (rule, value, callback) => {
      if (value === "") {
        if (this.TreeType == "start") {
          callback(new Error("请选择开始节点"));
        } else {
          callback(new Error("请选择结束节点"));
        }
      } else {
        callback();
      }
    };
    return {
      searchName: "",
      pageNumone: 0,
      pageNumoTwo: 0,
      tableData: [],
      tableDataTwo: [],
      isLoadingTable: false,
      ruleForm: {
        currentVal: "",
      },
      rules: {
        currentVal: [
          { required: true, validator: validateName, trigger: "blur" },
        ],
      },
    };
  },
  mounted() {
    this.pageNumone = 0;
    this.tableData = [];
    // this.getTabelData()
  },
  methods: {
    initData() {
      console.log('www')
      console.log(this.isPopup)
      console.log(this.title)
      if (this.isPopup) {
        this.pageNumone = 0;
        this.tableData = [];
        this.getTabelData();
        if (this.title == "编辑") {
          this.ruleForm.currentVal = this.editFrom["名称"];
        }
      }
    },
    //输入筛选--表格初始化
    inputValue(val) {
      this.pageNumone = 0;
      this.tableData = [];
      this.getTabelData(val);
    },
    getTabelData(val) {
      this.isLoadingTable = true;
      if (!val) {
        this.$store.dispatch("ajax", {
          url: `services/app-zonghe/api/example/cypher/nodes_with_model/${
            this.headerInfo[this.TreeType + "_node_label_name"]
          }?page=${this.pageNumone}&size=10`,
          method: "get",
          succeed: (res) => {
            console.log(res);
            this.tableData.push(...res);
            this.isLoadingTable = false;
          },
        });
      } else {
        this.$store.dispatch("ajax", {
          url: `services/app-zonghe/api/example/cypher/nodes_with_model/${
            this.headerInfo[this.TreeType + "_node_label_name"]
          }?名称.contains=${val}&page=${this.pageNumone}&size=10`,
          method: "get",
          succeed: (res) => {
            console.log(res);
            this.tableData.push(...res);
            this.isLoadingTable = false;
          },
        });
      }
    },
    //滚动到底部事件
    onscollend(event) {
      let endLength = event.target.clientHeight + event.target.scrollTop;
      if (endLength == event.target.scrollHeight) {
        this.pageNumone++;
        if (this.searchName) {
          this.getTabelData(this.searchName);
        } else {
          this.getTabelData();
        }
      }
    },
    //高亮当前行
    handlecurrent(currentRow) {
      this.ruleForm.currentVal = currentRow["名称"];
      this.$emit("handleCurrent", currentRow, this.TreeType);
    },
  },
};
</script>

<style lang="scss" scoped>
.content {
  width: 100%;
  height: 300px;

  .conmment {
    width: 100%;
    height: 100%;

    .header {
      width: 100%;
      height: 35%;
      .header_Input {
        width: 100%;
        display: flex;
        flex-flow: row nowrap;
        align-items: center;
        justify-content: space-around;
      }
    }

    .tree {
      width: 90%;
      height: 65%;
      overflow: auto;
      margin: 0 auto;
    }
  }
}
</style>
